import React from "react";
import { Chart, Axis, Tooltip, Geom } from "bizcharts";
import autoHeight from "../autoHeight";
import styles from "../index.less";

// 小型区域图
@autoHeight()
class MiniArea extends React.PureComponent {
  render() {
    const { height, data = [], forceFit = true, color = "rgba(24, 144, 255, 0.2)", borderColor = "#1089ff", scale = {}, borderWidth = 2, line, xAxis, yAxis, animate = true } = this.props;

    const padding = [30, 5, 5, 5];

    const scaleProps = {
      x: {
        type: "cat",
        range: [0, 1],
        ...scale.x
      },
      y: {
        min: 0,
        ...scale.y
      }
    };

    const tooltip = [
      "x*y",
      (x, y) => ({
        name: x,
        value: y
      })
    ];

    return (
      <div className={styles.miniChart} style={{ height }}>
        <div className={styles.chartContent}>
          {height > 0 && (
            <Chart animate={animate} scale={scaleProps} height={80} forceFit={forceFit} data={data} padding={padding}>
              <Axis key="axis-x" name="x" label={false} line={false} tickLine={false} grid={false} {...xAxis} />
              <Axis key="axis-y" name="y" label={false} line={false} tickLine={false} grid={false} {...yAxis} />

              <Geom
                type="area"
                position="x*y"
                color={color}
                tooltip={tooltip}
                shape="smooth"
                style={{
                  fillOpacity: 1
                }}
              />
              {line ? <Geom type="line" position="x*y" shape="smooth" color={borderColor} size={borderWidth} tooltip={false} /> : <span style={{ display: "none" }} />}
            </Chart>
          )}
        </div>
      </div>
    );
  }
}

export default MiniArea;
